let music = new Audio('/void/4.mp3');

const songs = [
    {
        id: '1',
        songName: `我们俩 <br>
    <div class="subtitle"> The first song you sang to me </div>`,
        poster: '/public/img/1.jpg'
    },
    {
        id: '2',
        songName: `失约的海 <br>
    <div class="subtitle"> Your new favorite </div>`,
        poster: '/img/2.jpg'
    },
    {
        id: '3',
        songName: `don't cry <br>
    <div class="subtitle"> Johnny Depp </div>`,
        poster: '/img/3.jpg'
    },
    {
        id: '4',
        songName: `fade to black <br>
    <div class="subtitle"> Leonardo DiCaprio </div>`,
        poster: '/img/4.jpg'
    },
    {
        id: '5',
        songName: `knocking on heaven's door <br>
    <div class="subtitle"> Benedict Cumberbatch </div>`,
        poster: '/img/5.jpg'
    },
    {
        id: '6',
        songName: `it's my life <br>
    <div class="subtitle"> Brad Pitt </div>`,
        poster: '/img/6.jpg'
    },
    {
        id: '7',
        songName: `the girl is mine <br>
    <div class="subtitle"> Joseph Gordon-Levitt </div>`,
        poster: '/img/7.jpg'
    },
    {
        id: '8',
        songName: `that's why you go away <br>
    <div class="subtitle"> Edward Norton </div>`,
        poster: '/img/8.jpg'
    },
    {
        id: '9',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/9.jpg'
    },
    {
        id: '10',
        songName: `Iris Goo Goo Dolls <br>
    <div class="subtitle"> Matt Damon </div>`,
        poster: '/img/10.jpg'
    },
    {
        id: '11',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/11.jpg'
    },
    {
        id: '12',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/12.jpg'
    },
    {
        id: '13',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/13.jpg'
    },
    {
        id: '14',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/14.jpg'
    },
    {
        id: '15',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/15.jpg'
    },
    {
        id: '16',
        songName: `never say goodbye <br>
    <div class="subtitle"> ake Gyllenhaal </div>`,
        poster: '/img/16.jpg'
    },
];


let masterPlay = document.getElementById('masterPlay');
let wave = document.getElementsByClassName('wave')[0];

masterPlay.addEventListener('click', () => {
    if (music.paused || music.currentTime <= 0) {
        music.play();
        masterPlay.classList.remove('bi-play-fill');
        masterPlay.classList.add('bi-pause-fill');
        wave.classList.add('active2');
    } else {
        music.pause();
        masterPlay.classList.add('bi-play-fill');
        masterPlay.classList.remove('bi-pause-fill');
        wave.classList.remove('active2');
    }
})

const makeAllPlays = () => {
    Array.from(document.getElementsByClassName('playListPlay')).forEach((element) => {
        element.classList.add('bi-play-circle-fill');
        element.classList.remove('bi-pause-circle-fill');
    })
}

const makeAllBackgrounds = () => {
    Array.from(document.getElementsByClassName('songItem')).forEach((elemenet) => {
        elemenet.style.background = 'rgb(105, 105, 170, 0)';
    })
}

let index = 0;
let poster_master_play = document.getElementById('poster_master_play');
let title = document.getElementById('title');


Array.from(document.getElementsByClassName('playListPlay')).forEach((element) => {
    element.addEventListener('click', (e) => {
        index = e.target.id;
        makeAllPlays();
        e.target.classList.remove('bi-play-circle-fill');
        e.target.classList.add('bi-pause-circle-fill');
        music.src = `/redio/${index}.mp3`;
        poster_master_play.src = `/img/${index}.jpg`;
        music.play();
        let song_title = songs.filter((ele) => {
            return ele.id == index;
        })

        song_title.forEach(ele => {
            let { songName } = ele;
            title.innerHTML = songName;
        })
        masterPlay.classList.remove('bi-play-fill');
        masterPlay.classList.add('bi-pause-fill');
        wave.classList.add('active2');
        music.addEventListener('ended', () => {
            masterPlay.classList.add('bi-play-fill');
            masterPlay.classList.remove('bi-pause-fill');
            wave.classList.remove('active2');
        })
        makeAllBackgrounds();
        Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = 'rgb(105, 105, 170, .1)';
    })
})

let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];

music.addEventListener('timeupdate', () => {
    this.music_curr = music.currentTime;
    this.music_dur = music.duration;

    let min = Math.floor(music_dur / 60);
    let sec = Math.floor(music_dur % 60);
    if (sec < 10) {
        sec = `0${sec}`
    }
    currentEnd.innerText = `${min}:${sec}`

    let min1 = Math.floor(music_curr / 60);
    let sec1 = Math.floor(music_curr % 60);
    if (sec1 < 10) {
        sec1 = `0${sec1}`
    }
    currentStart.innerText = `${min1}:${sec1}`

    let progressBar = parseInt((music.currentTime / music.duration) * 100);
    seek.value = progressBar;
    let seekBar = seek.value;
    bar2.style.width = `${seekBar}%`;
    dot.style.left = `${seekBar}%`;
})

seek.addEventListener('change', () => {
    music.currentTime = seek.value * music.duration / 100;
})

seek.addEventListener('ended', () => {
    masterPlay.classList.add('bi-play-fill');
    masterPlay.classList.remove('bi-pause-fill');
    wave.classList.remove('active2');
})

let vol_icon = document.getElementById('vol_icon');
let vol = document.getElementById('vol');
let vol_dot = document.getElementById('vol_dot');
let vol_bar = document.getElementsByClassName('vol_bar')[0];

vol.addEventListener('change', () => {
    if (vol.value == 0) {
        vol_icon.classList.remove('bi-volume-down-fill');
        vol_icon.classList.add('bi-volume-mute-fill');
        vol_icon.classList.remove('bi-volume-up-fill');
    }
    if (vol.value > 0) {
        vol_icon.classList.add('bi-volume-down-fill');
        vol_icon.classList.remove('bi-volume-mute-fill');
        vol_icon.classList.remove('bi-volume-up-fill');
    }
    if (vol.value > 50) {
        vol_icon.classList.remove('bi-volume-down-fill');
        vol_icon.classList.remove('bi-volume-mute-fill');
        vol_icon.classList.add('bi-volume-up-fill');
    }

    let vol_a = vol.value;
    vol_bar.style.width = `${vol_a}%`;
    vol_dot.style.left = `${vol_a}%`;
    music.volume = vol_a / 100;
})

let back = document.getElementById('back');
let next = document.getElementById('next');

back.addEventListener('click', () => {
    index -= 1;
    if (index < 1) {
        index = Array.from(document.getElementsByClassName('songItem')).length;
    }

    music.src = `/void/${index}.mp3`;
    poster_master_play.src = `/img/${index}.jpg`;
    music.play();
    let song_title = songs.filter((ele) => {
        return ele.id == index;
    })

    song_title.forEach(ele => {
        let { songName } = ele;
        title.innerHTML = songName;
    })

    makeAllPlays();

    document.getElementById(`${index}`).classList.remove('bi-play-fill');
    document.getElementById(`${index}`).classList.add('bi-pause-fill');

    makeAllBackgrounds();
    Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = 'rgb(105, 105, 170, .1)';
})

next.addEventListener('click', () => {
    index -= 0;
    index += 1;
    if (index > Array.from(document.getElementsByClassName('songItem')).length) {
        index = 1;
    }

    music.src = `/redio/${index}.mp3`;
    poster_master_play.src = `/img/${index}.jpg`;
    music.play();
    let song_title = songs.filter((ele) => {
        return ele.id == index;
    })

    song_title.forEach(ele => {
        let { songName } = ele;
        title.innerHTML = songName;
    })

    makeAllPlays();

    document.getElementById(`${index}`).classList.remove('bi-play-fill');
    document.getElementById(`${index}`).classList.add('bi-pause-fill');

    makeAllBackgrounds();
    Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = 'rgb(105, 105, 170, .1)';
})

let left_scroll = document.getElementById('left_scroll');
let right_scroll = document.getElementById('right_scroll');
let pop_song = document.getElementsByClassName('pop_song')[0];

left_scroll.addEventListener('click', () => {
    pop_song.scrollLeft -= 330;
})

right_scroll.addEventListener('click', () => {
    pop_song.scrollLeft += 330;
})


let left_scrolls = document.getElementById('left_scrolls');
let right_scrolls = document.getElementById('right_scrolls');
let item = document.getElementsByClassName('item')[0];

left_scrolls.addEventListener('click', () => {
    item.scrollLeft -= 330;
})

right_scrolls.addEventListener('click', () => {
    item.scrollLeft += 330;
})


Array.from(document.getElementsByClassName('songItem')).forEach((element, i) => {
    console.log('111', element.getElementsByTagName('img')[0].src)
    element.getElementsByTagName('img')[0].src = songs[i].poster;
    element.getElementsByTagName('h5')[0].innerHTML = songs[i].songName;
})